<style>
    .user-info{
        display: flex;
    }
    .flex{
        display: flex;
    }
    .row{
        margin-left: 20px;
        font-size: 20px;
    }
    .section{
        font-size: 14px;
    }
    .wrap{
        flex-wrap: wrap;
    }
    .section_name{
        width: 180px;
        white-space: nowrap;/*一行显示*/
        overflow: hidden;/*超出部分隐藏*/
        text-overflow: ellipsis;/*用...代替超出部分*/
    }
</style>
<div class="container">
    <div class="user-info">
        <div>
            <img src="{$user_info.avatar}" class="thumbnail" style="width:180px;height: 180px">
        </div>
        <div class="row">
            <div class="col-md-6 flex">
                <p>
                    姓名：
                </p>
                <p class="list-group-item-text">
                    {$user_info.nickname}
                </p>
            </div>
            <div class="col-md-6 flex">
                <p>
                    联系方式：
                </p>
                <p class="list-group-item-text">
                    {$user_info.mobile}
                </p>
            </div>
            <div class="col-md-6 flex">
                <p>
                    课程内容：
                </p>
                <p class="list-group-item-text">
                    {$user_course.course_name}
                </p>
            </div>
        </div>
    </div>
    <div class="section flex wrap">
        {volist name="user_section_list" id="vo"}
        <div class="section-item">
            <img src="{$vo.image}" class="thumbnail" style="width:180px;height: 180px">
            <div>
                <p class="section_name">课程章节：{$vo.section_name}</p>
                <p>学习时长：{$vo.studytime}</p>
                <p>学习状态：{$vo.study_status}</p>
                <p>学习时间：{$vo.createtime|}</p>
            </div>
        </div>
        {/volist}
    </div>
    <div>
        <span class="btn btn-danger btn-print">打印</span>
    </div>
</div>